---
category: Level 2 — Intermediate
created: '2020-03-18'
keywords: clipboardData, createObjectURL, FormData, getAsFile, paste event, paste image from clipboard, XMLHttpRequest
title: Paste an image from the clipboard
---

```js
// Handle the `paste` event
document.addEventListener('paste', function (evt) {
    // Get the data of clipboard
    const clipboardItems = evt.clipboardData.items;
    const items = [].slice.call(clipboardItems).filter(function (item) {
        // Filter the image items only
        return item.type.indexOf('image') !== -1;
    });
    if (items.length === 0) {
        return;
    }

    const item = items[0];
    // Get the blob of image
    const blob = item.getAsFile();
});
```

From the image blob, we can preview it as you see in the live example below:

```js
// Assume that we have an `img` element
// <img id="preview" />

const imageEle = document.getElementById('preview');
imageEle.src = URL.createObjectURL(blob);
```

or [upload](https://phuoc.ng/collection/html-dom/upload-files-with-ajax/) it to the server with an Ajax request:

```js
// Create a new FormData
const formData = new FormData();
formData.append('image', blob, 'filename');

// Create new Ajax request
const req = new XMLHttpRequest();
req.open('POST', '/path/to/back-end', true);

// Handle the events
req.onload = function () {
    if (req.status >= 200 && req.status < 400) {
        const res = req.responseText;
        // Do something with the response
        // ...
    }
};

// Send it
req.send(formData);
```

## Demo

<Playground>
```html
<div class="container">
    <div>
        <div><kbd class="key">Ctrl</kbd> + <kbd class="key">V</kbd> in this window.</div>
        <img class="preview" id="preview" />
    </div>
</div>
```

```css
.container {
    /* Center the content */
    align-items: center;
    display: flex;
    justify-content: center;

    /* Misc */
    height: 32rem;
    padding: 1rem 0;
}
.key {
    background-color: #f7fafc;
    border: 1px solid #cbd5e0;
    border-radius: 0.25rem;
    padding: 0.25rem;
}
.preview {
    align-items: center;
    border: 1px solid #cbd5e0;
    display: flex;
    justify-content: center;

    margin-top: 1rem;
    max-height: 16rem;
    max-width: 42rem;
}
```

```js
document.addEventListener('DOMContentLoaded', function () {
    document.addEventListener('paste', function (evt) {
        const clipboardItems = evt.clipboardData.items;
        const items = [].slice.call(clipboardItems).filter(function (item) {
            // Filter the image items only
            return item.type.indexOf('image') !== -1;
        });
        if (items.length === 0) {
            return;
        }

        const item = items[0];
        const blob = item.getAsFile();

        const imageEle = document.getElementById('preview');
        imageEle.src = URL.createObjectURL(blob);
    });
});
```
</Playground>

## See also

-   [Attach or detach an event handler](https://phuoc.ng/collection/html-dom/attach-or-detach-an-event-handler/)
-   [Preview an image before uploading it](https://phuoc.ng/collection/html-dom/preview-an-image-before-uploading-it/)
-   [Upload files with Ajax](https://phuoc.ng/collection/html-dom/upload-files-with-ajax/)
